<template>
    <div>
		<el-button type="primary" @click="grant">授权</el-button>
		
		
		<el-transfer v-model="roles"         :props="{
          key: 'roleId',
          label: 'roleName'
        }"
 :titles="titles" :data="data"></el-transfer>
		
		
	</div>
	
	
</template>

<script>
  export default {
    name: 'UserRole',
	props:['userId','showUserRole'],
    components: {

    },
    data() {
      return {
		  titles:["角色列表","授权角色"],
		  data:[],
		  roles:[]
      }
    },
    methods: {
		grant(){
			
			
			this.axios.get('/user?type=grantRole',(data)=>{
				if(data){
					this.$message.success("授权成功");
					this.$emit("update:showUserRole",false)
				}
			},{
				userId:this.userId,
				roleId:this.roles.toString(), // 1,2 
			})		
		},
		
		//拉取所有角色
		getRoles(){
			this.axios.get('/role?type=listAll',(roles)=>{
				console.log(roles) ;//{roleId:'1',roleName:'管理员'}
				this.data = roles;
			})
		},
		getUserRoles(){
			this.axios.get('/user?type=userRoles',(roles)=>{
				for(let i=0; i<roles.length ;i++){
					this.roles.push(roles[i].roleId);
				}
			},{
				userId:this.userId
			})
		}
    },
	watch:{
		roles:function(v1,v2){
			console.log(v1,v2);
		}
	},
    created() {
		this.getRoles();
		this.getUserRoles();//
		
		
	}
  }
</script>

<style>
</style>
